<script>
import request from "../../../utils/request"
import store from "../../../store"
import { userActionType } from "../../../store/modules/user"
import Empty from "../../../components/empty.vue"
import thesaurusItem from "./components/thesaurusItem.vue"
import checkIsVip from "@/components/checkIsVip/index.vue"
import { vocabularyLearningActionType } from "@/store/modules/vocabularyLearning"
import daiBeiAlert from "@/components/daiBeiAlert.vue"
import { getEnv } from "@/utils/settings"

export default {
  name: "thesaurus",
  components: { Empty, thesaurusItem, checkIsVip, daiBeiAlert },
  methods: {
    //添加计划
    async selectThesaurus(item) {
      // 处理带背词库
      if (item.thesaurusCategory === "Racked") {
        // 判断是否允许进入
        try {
          await request({
            url: "thesaurus/checkAvailable",
            data: {
              thesaurusId: item.thesaurusId,
            },
            showLoading: true,
          })
        } catch (e) {
          this.$refs.daiBeiAlert.open(item.jumpPaidPage)
          return
        }
      }
      //处理付费规则
      if (item.businessRules && item.businessRules === "MemberFree") {
        if (!(await this.$refs.checkIsVip.checkIsVip("/vocabulary/pages/makeLearningPlan/thesaurus"))) {
          return
        }
      }
      store.commit(vocabularyLearningActionType.mutations.vocabularyDetail, item)
      uni.navigateTo({
        url: "/vocabulary/pages/makeLearningPlan/addPlan",
      })
    },
  },
  data() {
    return {
      thesaurusList: [],
      noData: false,
    }
  },
  computed: {
    userSelectExamId: () => store.getters[userActionType.getters.userSelectExamId],
  },
  async onShow() {
    //查询词库列表
		if (!this.userSelectExamId) {
			await store.dispatch(userActionType.action.examInfo)
		}
    //没有选择考试跳转到考试选择页面
    if (!this.userSelectExamId) {
      uni.redirectTo({
        url: "/pages/examSelection/index?redirectUrl=" + encodeURIComponent("/vocabulary/pages/makeLearningPlan/thesaurus"),
      })
      return
    }
    request({
      url: "thesaurus/getAllThesaurus",
      showLoading: true,
      data: {
        current: 1,
        size: -1,
        examId: this.userSelectExamId,
      },
      errorHandle: true,
    }).then((data) => {
      if (data.records && data.records.length > 0) {
        this.thesaurusList = data.records
      } else {
        this.noData = true
      }
    })
  },
}
</script>

<template>
  <view class="page">
    <view class="title">词库选择</view>
    <view class="thesaurus-plan-list-container">
      <block v-if="!noData">
        <view class="thesaurus-plan-item" v-for="item in thesaurusList" :key="item.thesaurusId" @click="selectThesaurus(item)">
          <thesaurus-item :detail="item"></thesaurus-item>
        </view>
      </block>
      <empty v-else style="width: 100%; height: 100%"></empty>
    </view>

    <checkIsVip ref="checkIsVip"></checkIsVip>
    <daiBeiAlert ref="daiBeiAlert"></daiBeiAlert>
  </view>
</template>

<style scoped lang="scss">
.page {
  padding: 30rpx;
  height: 100vh;
  background: var(--gray-background-color);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.title {
  font-size: 40rpx;
  font-weight: bold;
  color: var(--text-color);
}
.thesaurus-plan-list-container {
  height: 0;
  flex: 1;
  overflow: auto;
  > .thesaurus-plan-item {
    margin-top: 30rpx;
  }
}
</style>
